:host {
  --mat-sidenav-container-divider-color: var(--ngm-color-outline-variant);

  display: flex;
  flex-direction: row;
  align-items: stretch;

  .ngm-calculated-measure__drawer {
    overflow: visible;

    .ngm-calculated-measure__drawer-anchor {
      position: absolute;
      left: -40px;
      top: 0;
      opacity: 0.5;

      &:hover {
        opacity: 1;
      }
    }
  }

  .ngm-calculated-measure__monaco-editor {
    flex: 1;
  }
  .ngm-calculated-measure__formula-functions {
    flex: 1;

    .ngm-mdx-functions__function-option {
      .ngm-mdx-functions__help-trigger {
        opacity: 0;
        visibility: hidden;
        transition: all 300ms ease-in-out;
      }

      &:hover {
        .ngm-mdx-functions__help-trigger {
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }
}

:host::ng-deep {
  .ngm-calculated-measure__helpers {
    .mat-mdc-tab-header {
      --mdc-secondary-navigation-tab-container-height: 38px;
    }
    .mdc-tab {
      @apply min-w-0 transition-all flex items-center;

      // 导航菜单间隔符
      &::after {
        content: "";
        height: 15px;
        width: 2px;
        position: absolute;
        right: 0;
        border-radius: 2px;
        @apply bg-gray-100 dark:bg-neutral-700;
      }

      &:not(.mdc-tab--active) {
        @apply px-2;
      }
      &.mdc-tab--active {
        @apply px-10;
      }
    }
    .mat-mdc-tab-body-wrapper {
      flex: 1;
      .mat-mdc-tab-body-content {
        display: flex;
      }
    }
  }
}

.mat-drawer-content {
  @apply relative overflow-hidden flex flex-col;

  .mat-toolbar {
    height: 44px;
    font-size: 1rem;
  }
}

.ngm-calculated-measure__helpers {
  --mdc-list-list-item-container-shape: theme('borderRadius.md');
  @apply h-full;

  ngm-entity-member-select {
    flex: 1;
    min-width: 300px;
  }
}

#ngm-calculated-parameters {
  .mat-mdc-list-item {
    .ngm-calculated-measure__parameter-edit {
      opacity: 0;
    }

    &:hover {
      .ngm-calculated-measure__parameter-edit {
        opacity: 1;
      }
    }
  }
}
